<template>
  <div class="header">
  <div class="bread">
    <el-breadcrumb :separator-icon="ArrowRight">
    <el-breadcrumb-item to="/home" v-if="path!='/home'">首页</el-breadcrumb-item>
    <el-breadcrumb-item v-for="item in breadcrumbs"  :to="item.path">{{ item.meta.title }}</el-breadcrumb-item>
  </el-breadcrumb>
  </div>
  <div v-if="userInfo" class="info">
   <span>欢迎! {{ userInfo.userGroup }} : {{ userInfo.account }} 登录<span @click="outLogin"> 退出登录</span></span>
   <el-avatar :size="30" :src="serverUrl + userInfo.imgUrl" />
  </div>
  </div>
</template>

<script setup>
import { ref,computed,watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ArrowRight } from '@element-plus/icons-vue'
import { accountInfo } from '../api/account';
import {userStore} from '@/stores/userStore'
import { serverUrl } from '@/utils/common';
const route = useRoute();
const router = useRouter();
const store = userStore();
const breadcrumbs = computed(()=>{
  console.log(route.matched);
  let  matched = route.matched.filter(item =>{
    return item.meta.unshow !== true
  })
  return matched;
})
let user =JSON.parse(sessionStorage.getItem('user'))
const userInfo = ref(null);
let getAccountInfo = async ()=>{
  let res = await accountInfo({id:user.id});
  userInfo.value = res.accountInfo;
  console.log(res);
}
getAccountInfo()
// 随着个人中心的头像改变而改变
 watch(()=>store.userInfoChange,()=>{
  getAccountInfo();
 })
//  退出登录
const outLogin = ()=>{
  sessionStorage.clear();
  router.push('/login');
}
</script>

<style lang="scss" scoped>
.header{
  width: 96%;
  height: 50px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2%;
  .info{
    display: flex;
    align-items: center;
  }
  .info span{
    margin-right: 15px;
    span{
      color: #b6c4d1;
      cursor: pointer;
    }
    span:hover{
      color: #e5520d;
    }
  }
}
</style>